<template>
  <view class="container">
    <view class="header">
      <text class="title">修改密码</text>
      <text class="subtitle">为您的账户设置新的登录密码</text>
    </view>
    
    <Card class="form-card">
      <view class="form-group">
        <text class="label">当前密码</text>
        <input 
          class="input" 
          type="password" 
          placeholder="请输入当前密码" 
          v-model="form.currentPassword"
        />
      </view>
      
      <view class="form-group">
        <text class="label">新密码</text>
        <input 
          class="input" 
          type="password" 
          placeholder="请输入新密码" 
          v-model="form.newPassword"
        />
      </view>
      
      <view class="form-group">
        <text class="label">确认新密码</text>
        <input 
          class="input" 
          type="password" 
          placeholder="请再次输入新密码" 
          v-model="form.confirmPassword"
        />
      </view>
      
      <Button 
        class="submit-btn" 
        type="primary" 
        text="保存新密码" 
        :loading="loading"
        @click="handleSubmit"
      />
    </Card>
    
    <Card class="tips-card">
      <view class="card-header">
        <text class="card-title">密码安全提示</text>
      </view>
      
      <view class="tips-list">
        <view class="tip-item">
          <text class="tip-icon">✓</text>
          <text class="tip-text">密码长度至少8位</text>
        </view>
        
        <view class="tip-item">
          <text class="tip-icon">✓</text>
          <text class="tip-text">建议包含大小写字母、数字和特殊字符</text>
        </view>
        
        <view class="tip-item">
          <text class="tip-icon">✓</text>
          <text class="tip-text">不要使用生日、姓名等容易被猜测的信息</text>
        </view>
        
        <view class="tip-item">
          <text class="tip-icon">✓</text>
          <text class="tip-text">定期更换密码以提高安全性</text>
        </view>
      </view>
    </Card>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        currentPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      loading: false
    };
  },
  
  methods: {
    handleSubmit() {
      if (!this.form.currentPassword) {
        uni.showToast({
          title: '请输入当前密码',
          icon: 'none'
        });
        return;
      }
      
      if (!this.form.newPassword) {
        uni.showToast({
          title: '请输入新密码',
          icon: 'none'
        });
        return;
      }
      
      if (this.form.newPassword.length < 8) {
        uni.showToast({
          title: '新密码长度至少8位',
          icon: 'none'
        });
        return;
      }
      
      if (this.form.newPassword !== this.form.confirmPassword) {
        uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none'
        });
        return;
      }
      
      // 模拟修改密码过程
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        uni.showToast({
          title: '密码修改成功',
          icon: 'success'
        });
        
        // 返回个人设置页面
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: $spacing-lg;
  padding: $spacing-xl 0;
}

.title {
  font-size: $font-size-xl;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-sm;
}

.subtitle {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.form-card {
  margin-bottom: $spacing-base;
}

.form-group {
  margin-bottom: $spacing-lg;
}

.label {
  display: block;
  font-size: $font-size-base;
  color: $text-primary;
  margin-bottom: $spacing-sm;
}

.input {
  width: 100%;
  height: 80rpx;
  padding: 0 $spacing-base;
  border: 1rpx solid $text-tertiary;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  box-sizing: border-box;
}

.submit-btn {
  width: 100%;
  margin-top: $spacing-xl;
}

.tips-card {
  margin-bottom: $spacing-lg;
}

.card-header {
  margin-bottom: $spacing-base;
}

.card-title {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
}

.tips-list {
  margin-top: $spacing-sm;
}

.tip-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: $spacing-sm;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.tip-icon {
  color: $secondary-color;
  margin-right: $spacing-sm;
  font-weight: bold;
}

.tip-text {
  font-size: $font-size-sm;
  color: $text-primary;
  flex: 1;
}
</style>